<template>
  <!-- 库存库龄 -->
  <div class="content">
    <div class="header">
      <div class="header-name">
        <el-form :model="basicValue" size="mini" label-width="100px">
          <el-form-item :label="$t('market.stockname')">
            <el-input v-model="basicValue.stockName" />
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')">
            <el-input v-model="basicValue.name" />
          </el-form-item>
          <el-form-item :label="$t('shop.fnumber1')">
            <el-input v-model="basicValue.fnumber" />
          </el-form-item>
          <el-form-item :label="$t('shop.specifica')">
            <el-input v-model="basicValue.fspec" />
          </el-form-item>
          <el-form-item :label="$t('menu.stockAge')">
            <el-select v-model="basicValue.ageStatus">
              <el-option :label="$t('market.all')" value="" />
              <el-option :label="$t('market.delay15')" value="15stock" />
              <el-option :label="$t('market.delay30')" value="30stock" />
              <el-option :label="$t('market.delay60')" value="60stock" />
              <el-option :label="$t('market.stock60')" value="stock" />
              <el-option :label="$t('market.stock90')" value="90stock" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="50px">
            <el-button type="primary" size="mini" @click="handleQuerySonClass">{{ $t('btn.search') }}</el-button>
            <el-button type="primary" size="mini" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        sortable
        :get-summaries="getSummaries"
        show-summary
      >
        <!--    物料编码    -->
        <template v-slot:orderSlot="col">
          <el-link type="primary" @click="jumpMateriel(col.scope.row)">
            {{ col.scope.row.fnumber }}
          </el-link>
        </template>
      </jc-table>
      <cardTab :tab-arr="tabArr" field="fname" @search="handleQueryBomList" />
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="handleGetUntreated"
      />
    </div>
  </div>
</template>

<script>
import {
  queryStockQtyAgeList
} from '@/api/repertory/forthwith'
import searData from '@/components/Search/mixin'
import { maxDecimal } from '@/utils/number'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  // name: 'ForthwithRep',
  components: {
    cardTab: () => import('@/components/cardTab')
  },
  mixins: [searData],
  data() {
    return {
      ftype: 72,
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      tabArr: [
        { label: '餐台', name: '餐台' },
        { label: '餐椅', name: '餐椅' },
        { label: '包装', name: '包装' },
        { label: '木板', name: '木板' },
        { label: '管材', name: '管材' },
        { label: '包材', name: '包材' },
        { label: '泡沫', name: '泡沫' },
        { label: '海绵', name: '海绵' },
        { label: '纸箱', name: '纸箱' },
        { label: '纸平卡', name: '纸平卡' },
        { label: '布', name: '布' },
        { label: '瓷砖', name: '瓷砖' },
        { label: '下架', name: '下架' },
        { label: '中柱', name: '中柱' },
        { label: '软体', name: '软体' },
        { label: '底盘', name: '底盘' },
        { label: '面板', name: '面板' },
        { label: '台面', name: '台面' },
        { label: '螺丝', name: '螺丝' }
      ],
      basicValue: {
        stockName: '',
        name: '',
        fnumber: '',
        fspec: '',
        ageStatus: ''
      },
      // 表头
      tableData: [], // 销售数据
      tableHeight: '73vh',
      tableHeader: [
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), type: 'order', prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.specifica'), prop: 'fspecificaTion', minWidth: '120px' },
        { label: this.$t('market.funit'), prop: 'funitName', width: '80' },
        { label: this.$t('market.stock2'), prop: 'fstockName' },
        { label: this.$t('market.sumQty'), prop: 'sumQty', align: 'right', width: '90' },
        { label: this.$t('market.delay15'), prop: '15stock', align: 'right', width: '90' },
        { label: this.$t('market.delay30'), prop: '30stock', align: 'right', width: '90' },
        { label: this.$t('market.delay60'), prop: '60stock', align: 'right', width: '90' },
        { label: this.$t('market.stock60'), prop: 'stock', align: 'right', width: '90' },
        { label: this.$t('market.stock90'), prop: '90stock', align: 'right', width: '90' },
        { label: this.$t('market.lastestTime'), prop: 'lastestTime' }
      ],
      tableHeader1: []
    }
  },
  mounted() {
    this.handleGetUntreated()
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 230px)' : '70vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          queryStockQtyAgeList({
            pageSize: 100000,
            pageNum: 1,
            search: this.searCollData
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.list
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '库存库龄')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取即时库存数据
    async handleGetUntreated() {
      const DATA = { pageNum: this.currentPage, pageSize: this.size, ...this.basicValue }
      const RES = await queryStockQtyAgeList(DATA)
      this.tableData = RES.data.list
      this.tableData.map(item => {
        item.kCqty = maxDecimal(item.kCqty)
      })
      this.total = RES.data.total
    },
    // 搜索
    handleQuerySonClass(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.customHandle(ev)
        this.handleGetUntreated()
      } else {
        this.handleGetUntreated()
      }
    },
    // 成品 原材料
    handleQueryBomList(ev) {
      this.searCollData = []
      this.currentPage = 1
      this.searCollData = ev
      this.searchSon = ev
      this.handleGetUntreated()
    }
    // 详情
    // detailPurchase(id) {
    //   this.$router.push({ path: `/productionDetails/${id}` })
    // }
  }
}
</script>
<style lang="scss" scoped>
.content {
  @include listBom;
  padding: 0;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      //height: 35px;
      width: 275px;
      margin-bottom: 5px;
    }
  }
}
</style>
